<template>
	<view class="out">
		<input type="text" @focus="isActive = true" @blur="isActive = false" />
		<image src="../../static/chicken.gif" mode="" class="pic" :class="isActive ? 'active':''"></image>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	const isActive = ref(false);
</script>

<style lang="scss">
	.out {
		padding: 0 20px;
		margin-top: 40px;
		position: relative;

		input {
			border: 1px solid #ccc;
			height: 40px;
			position: relative;
			z-index: 2;
			background: #fff;
		}

		.pic {
			width: 24px;
			height: 24px;
			position: absolute;
			top: 8px;
			// left: calc(50% - 12px);
			right: 24px;
			z-index: 1;
			transition: right 0.3s;
		}

		.active {
			right: 0px;
		}
	}
</style>